<template>
	<div class="mainContent">
		<pathTracking :path="Model.path" />
		<div class="container">
			<!-- 一级tabs -->
			<el-tabs v-model="Model.activeTab" @tab-click="onTabChange">
				<el-tab-pane label="拆分单详情" name="1"></el-tab-pane>
				<el-tab-pane label="操作日志" name="2"></el-tab-pane>
			</el-tabs>
			<div class="tabBox">
				<!-- **********************************************               退料单详情                   ************************************** -->
				<div v-show="Model.activeTab==1">
					<el-row class="detailTable">
						<el-form :inline="true" v-show="Model.detailTableFrom.flag">
							<el-col :sm="24" :md="12" :lg="8" :xl="6" v-for="(item,index) in Model.tableFormInline" :key="index">
								<el-form-item :label="item.label+'：'">{{item.value}}</el-form-item>
							</el-col>
						</el-form>
					</el-row>
					<el-row class="detailTable">
						<div class="detailTableItemTitle">
							<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
							<p class="text">应拆分商品</p>
							<img class="detailTableImgNormal" :src="Model.tab1TableDetail1.src" alt="" @click="toggleTableDetail('tab1TableDetail1')">
							<!-- <img class="detailTableImgNormal" src="@/assets/img/icon_unfold.png" alt="" v-show="Model.tab1TableDetail1"> -->
						</div>
						<div class="detailTableDetail" v-show="Model.tab1TableDetail1.flag">
							<el-table :data="Model.tableData" border style="width: 100%;max-height:550px">
								<el-table-column 
									v-for="item in Model.tableHeaderData"
									:key="item.prop"
									:prop="item.prop" 
									:label="item.label" 
									:width="item.width" 
								></el-table-column>
							</el-table>
						</div>
					</el-row>
					<el-row class="detailTable">
						<div class="detailTableItemTitle">
							<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
							<p class="text">入库物料明细-实入</p>
							<img class="detailTableImgNormal" :src="Model.tab1TableDetail2.src" alt="" @click="toggleTableDetail('tab1TableDetail2')">
							<!-- <img class="detailTableImgNormal" src="@/assets/img/icon_unfold.png" alt="" v-show="Model.tab1TableDetail1"> -->
						</div>
						<div class="detailTableDetail" v-show="Model.tab1TableDetail2.flag">
							<el-table :data="Model.tableDataTwo" border style="width: 100%;max-height:550px">
								<el-table-column 
									v-for="item in Model.tableHeaderDataTwo"
									:key="item.prop"
									:prop="item.prop" 
									:label="item.label" 
									:width="item.width" 
								></el-table-column>
							</el-table>
						</div>
					</el-row>
				</div>
				<!-- **********************************************               操作日志                   ************************************** -->
				<div v-show="Model.activeTab==2">
					<el-row>
						<el-form :inline="true">
							<el-col :sm="24" :md="12" :lg="8" :xl="6">
								<el-form-item label="入库单号：">12218102309158297</el-form-item>
								<el-form-item label="入库单状态：">待入库</el-form-item>
							</el-col>
						</el-form>
					</el-row>
					<el-row>
						<div class="tabBoxStep">
							<el-steps :active="Model.refundStep.activeStep">
								<el-step :title="item.title" :description="item.description" v-for="(item,index) in Model.refundStep.step" :key="index"></el-step>
							</el-steps>
						</div>
					</el-row>
					<el-row class="detailTable">
						<div class="detailTableItemTitle">
							<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
							<p class="text">入库单详细信息</p>
						</div>
						<el-form :inline="true">
							<el-col :sm="24" :md="12" :lg="8" :xl="6" v-for="(item,index) in Model.tableFormInline_b" :key="index">
								<el-form-item :label="item.label+'：'">{{item.value}}</el-form-item>
							</el-col>
						</el-form>
					</el-row>
					<el-row class="detailTable">
						<div class="detailTableItemTitle">
							<img class="detailTableImgSmall" src="@/assets/img/flower_brown.png" alt="">
							<p class="text">操作日志</p>
							<img class="detailTableImgNormal" :src="Model.tab4TableDetail1.src" alt="" @click="toggleTableDetail('tab4TableDetail1')">
						</div>
						<div class="detailTableDetail" v-show="Model.tab4TableDetail1.flag">
							<el-table :data="Model.tableData4" border show-summary style="width: 100%;max-height:550px">
								<el-table-column prop="numberIndex" label="序号" width=""></el-table-column>
								<el-table-column prop="createTime" label="时间" width=""></el-table-column>
								<el-table-column prop="createBy" label="操作人" width=""></el-table-column>
								<el-table-column prop="record" label="操作记录"></el-table-column>
							</el-table>
						</div>
					</el-row>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import pathTracking from "@/components/common/pathTracking";
	import pagination from "@/components/common/pagination.vue";
	import advancedSearch from "@/components/common/filter/advancedSearch";
	import {
		getDateString
	} from "@/assets/js/common.js";
	import Model from "./model.js";
	import Controller from "./Controller.js";
	export default {
		name: "purchase",
		mixins: [Model, Controller],
		components: {
			advancedSearch,
			pagination,
			pathTracking
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	@import "./index.less";
</style>
